<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <script src="../../lib/jquery/jquery-3.6.0.js"></script>
  <script src="../../javaScript/index.js"></script>
  <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.css">
  <link rel="stylesheet" href="../../javaScript/shangpinguanli/shangpinliebiao.js">
  <link rel="stylesheet" href="../../font/iconfont.css">
  <link rel="stylesheet" href="../../css/shangpinguanli/xinzengshangpin.css">
  <link rel="stylesheet" href="../../font/wenben/iconfont.css">
  <link rel="stylesheet" href="../../css/public.css">
  <script src="../../javaScript/quanXianGuanLi/anNiu.js"></script>
</head>

<body>

  <div class="container">
    <div class="content">
      <div>基础信息</div>
      <div>
        <div class="input-group input-group-lg fenlei">
          <span class="input-group-addon" id="sizing-addon2"> <span class="xing">*</span>商品分类:</span>
          <span>一级分类>二级分类>三级分类 <span>修改</span></span>
        </div>
        <div class="input-group input-group-lg">
          <span class="input-group-addon" id="sizing-addon2"> <span class="xing">*</span>商品名称:</span>
          <input type="text" class="form-control" aria-describedby="sizing-addon2">
        </div>
        <div class="input-group input-group-lg">
          <span class="input-group-addon tuijian" id="sizing-addon2"> 推荐语:</span>
          <input type="text" class="form-control" aria-describedby="sizing-addon2">
        </div>
        <div class="input-group input-group-lg">
          <span class="input-group-addon spsx" id="sizing-addon2"> <span class="xing">*</span>商品属性:</span>
          <div class="shuxing">
            <div class="input-group input-group-lg ">
              <span class="input-group-addon pingpai" id="sizing-addon2"> <span class="xing">*</span>品牌:
              </span>
              <select name="" id="" class="form-control" placeholder="商品名称" aria-describedby="sizing-addon2"
                style="width: 255px;">
                <option value="0">请选择品牌</option>
                <option value="1">品牌1</option>
                <option value="2">品牌2</option>
                <option value="3">品牌3</option>
                <option value="4">品牌4</option>
                <option value="5">品牌5</option>
                <option value="6">品牌6</option>
              </select>
              <span> <a href="../shangpinshuxing/xinzengpinpai.html">新增品牌</a></span>
            </div>
            <div class="input-group input-group-lg ">
              <span class="input-group-addon" id="sizing-addon2"> 上市时间:</span>
              <select name="" id="" class="form-control" placeholder="商品名称" aria-describedby="sizing-addon2"
                style="width: 255px;">
                <option value="0">请选择上市时间</option>
                <option value="1">2022年</option>
                <option value="2">2021年</option>
                <option value="3">2020年</option>
                <option value="4">2019年</option>
                <option value="5">2018年</option>
                <option value="6">2017年</option>
                <option value="7">2016年</option>
                <option value="8">2015年</option>
                <option value="9">2014年</option>
              </select>
            </div>
          </div>
        </div>
        <div class="input-group input-group-lg">
          <span class="input-group-addon" id="sizing-addon2"> <span class="xing">*</span>支付方式:</span>
          <select name="" id="" class="form-control" placeholder="请选择支付方式" aria-describedby="sizing-addon2"
            style="width: 400px;">
            <option value="0">请选择支付方式</option>
            <option value="1">在线支付/货到付款</option>
            <option value="2">在线支付</option>
            <option value="3">货到付款</option>

          </select>
        </div>
      </div>
    </div>
    <div class="content">
      <div>图文信息</div>
      <div class="input-group input-group-lg fenlei">
        <span class="input-group-addon zhutu" id="sizing-addon2"> <span class="xing">*</span>主图:</span>

        <div id="input_img_father_div">
          <input id="upload_input" type="file" accept="image/*" />
          <!-- 自定义按钮效果 -->
          <div id="input_img_btn_div">
            <span id="input_img_btn_span">+
              <p>(1/5)</p>
            </span>

          </div>
        </div>

        <p> 1. 请上传至少1张主图，主图应包含商品正反面外包装图；若涉及活动，请在图片上清晰显示活动时间和活动方式。
        </p>
        <p> 2. 图片支持png、jpg、jpeg格式；建议图片尺寸为600*600px，或更大的尺寸；图片大小请小于1M。</p>
      </div>
      <div class="input-group input-group-lg fenlei">
        <span class="input-group-addon xiang" id="sizing-addon2"> <span class="xing">*</span>商品详情:</span>
        <div class="xiangxing">
          <div class="icon">
            <span class="iconfont icon-H"></span>
            <span class="iconfont icon-jiacu"></span>
            <span class="iconfont icon-qingxie-"></span>
            <span class="iconfont icon-zitixiahuaxian"></span>
            <span class="iconfont icon-shanchuxian"></span>
            <span class="iconfont icon-qianbi"></span>
            <span class="iconfont icon-maobi"></span>
            <span class="iconfont icon-lianjie"></span>
            <span class="iconfont icon-H"></span>
            <span class="iconfont icon-zuoduiqi"></span>
            <span class="iconfont icon-quote"></span>
            <span class="iconfont icon-tupian"></span>
            <span class="iconfont icon-biaodanzujian-biaoge"></span>
            <span class="iconfont icon-shipin"></span>
            <span class="iconfont icon-fanhuishangyibu-"></span>
            <span class="iconfont icon-fanhuixiayibu-"></span>
          </div>
          <div>
            <textarea name="" id="" cols="116" rows="25"></textarea>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div>价格与库存</div>
      <div class="input-group input-group-lg">
        <span class="input-group-addon spsx" id="sizing-addon2"> <span class="xing">*</span>商品规格:</span>
        <div class="shuxing">
          <div class="input-group input-group-lg  guige_top clear">
            <select name="" id="" class="form-control" placeholder="颜色" aria-describedby="sizing-addon2"
              style="width: 255px;">
              <option value="0">颜色</option>
              <option value="1">尺寸</option>
              <option value="2">重量</option>
            </select>
            <span>上传图片</span>
            <div id="zhuangtai">
              <span class="iconfont icon-anniu_kaiqi"></span><span class="iconfont icon-anniu_guanbi"></span>
            </div>
            <button type="button" class="mbutton-white ybtn">移除规格</button>
          </div>
          <div class="check">
            <input type="checkbox"><span>红色</span>
            <input type="checkbox"><span>黄色</span>
            <input type="checkbox"><span>蓝色</span>
            <div class="input-group input-group-lg">
              <input type="text" class="form-control" aria-describedby="sizing-addon2" style="width: 255px;"
                placeholder="规格值名称，如红色">
              <button type="button" class="mbutton-white shandao">+新增规格值</button>
            </div>
          </div>



        </div>
        <div class="xin">
          <button type="button" class="mbutton-white guige">+新增规格</button>
          <span>最多添加2组商品规格，第一组商品规格可添加图片</span>
        </div>

      </div>
      <div class="input-group input-group-lg jiage">
        <span class="input-group-addon " id="sizing-addon2"> <span class="xing">*</span>价格库存:</span>
        <p>批量设置(在下方栏中选择内容进行批量填充)</p>
        <div>
          <table id="table_1">
            <thead>
              <tr>
                <th><select name="" id="">
                    <option value="0">请选择颜色</option>
                    <option value="1">红色</option>
                    <option value="2">蓝色</option>
                    <option value="3">黄色</option>
                  </select></th>
                <th><select name="" id="">
                    <option value="0">请选择尺寸</option>
                    <option value="1">45cm</option>
                    <option value="2">50cm</option>
                    <option value="3">55cm</option>
                  </select></th>
                <th><input type="text" placeholder="库存"></th>
                <th><input type="text" placeholder="价格"></th>
                <th><input type="text" placeholder="SUK编码"></th>
                <th><button class="mbutton">批量修改</button></th>
              </tr>
            </thead>

          </table>
          <table id="table_2" border>
            <thead>
              <tr>
                <th>颜色</th>
                <th>尺寸</th>
                <th>库存</th>
                <th>价格</th>
                <th>SUK编码</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>红色</td>
                <td>50cm</td>
                <td><input type="text" placeholder="库存"></td>
                <td><input type="text" placeholder="价格"></td>
                <td><input type="text" placeholder="SUK编码"></td>
              </tr>
              <tr>
                <td>黄色</td>
                <td>45cm</td>
                <td><input type="text" placeholder="库存"></td>
                <td><input type="text" placeholder="价格"></td>
                <td><input type="text" placeholder="SUK编码"></td>
              </tr>
              <tr>
                <td>蓝色</td>
                <td>50cm</td>
                <td><input type="text" placeholder="库存"></td>
                <td><input type="text" placeholder="价格"></td>
                <td><input type="text" placeholder="SUK编码"></td>
              </tr>
              <tr>
                <td>黄色</td>
                <td>50cm</td>
                <td><input type="text" placeholder="库存"></td>
                <td><input type="text" placeholder="价格"></td>
                <td><input type="text" placeholder="SUK编码"></td>
              </tr>
              <tr>
                <td>蓝色色</td>
                <td>45cm</td>
                <td><input type="text" placeholder="库存"></td>
                <td><input type="text" placeholder="价格"></td>
                <td><input type="text" placeholder="SUK编码"></td>
              </tr>
              <tr>
                <td>红色</td>
                <td>45cm</td>
                <td><input type="text" placeholder="库存"></td>
                <td><input type="text" placeholder="价格"></td>
                <td><input type="text" placeholder="SUK编码"></td>
              </tr>

            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="content">
      <div>服务与资质</div>
      <div class="input-group input-group-lg zizhi">
        <span class="input-group-addon" id="sizing-addon2"> <span class="xing">*</span>运费模板:</span>
        <select name="" id="" class="form-control" placeholder="请选择支付方式" aria-describedby="sizing-addon2"
          style="width: 400px;">
          <option value="0">请选择运费模板</option>
          <option value="1">模板1</option>
          <option value="2">模板2</option>
          <option value="3">模板3</option>
        </select>
        <span><a href="../wuliuganli/">新增运费模板</a> </span>
      </div>
      <div class="input-group input-group-lg zizhi_1">
        <span class="input-group-addon" id="sizing-addon2"> <span class="xing">*</span>退换货类型:</span>
        <select name="" id="" class="form-control" placeholder="请选择支付方式" aria-describedby="sizing-addon2"
          style="width: 400px;">
          <option value="0">7天无理由退换货</option>
        </select>

      </div>
      <div class="input-group input-group-lg radio">
        <span class="input-group-addon" id="sizing-addon2"> <span class="xing">*</span>承诺发货时间:</span>
        <div>
          <label class="radio-inline">
            <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> <span>24小时</span>
          </label>
          <label class="radio-inline">
            <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> <span>48小时</span>
          </label>
          <label class="radio-inline">
            <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"><span> 72小时</span>
          </label>
        </div>

      </div>
      <div class="input-group input-group-lg fuwu">
        <span class="input-group-addon" id="sizing-addon2"> <span class="xing"></span>客服电话:</span>
        <input type="text" class="form-control" aria-describedby="sizing-addon2">
      </div>
      <div class="input-group input-group-lg fuwu">
        <span class="input-group-addon" id="sizing-addon2"> <span class="xing"></span>商品备注:</span>
        <input type="text" class="form-control" aria-describedby="sizing-addon2">
      </div>
      <div class="input-group input-group-lg fuwu ">
        <span class="input-group-addon" id="sizing-addon2"> <span class="xing"></span>品类资质:</span>
        <div id="input_img_father_div">
          <input id="upload_input" type="file" accept="image/*" />
          <!-- 自定义按钮效果 -->
          <div id="input_img_btn_div">
            <span id="input_img_btn_span">
              +
              <p>(1/5)</p>
            </span>

          </div>
        </div>
        <p> 支持JPG、PNG、GIF格式的图片，大小请小于2M，尺寸大于等于600*600px</p>
      </div>
      <div class="input-group input-group-lg fuwu ">
        <span class="input-group-addon" id="sizing-addon2"> <span class="xing"></span>质检报告:</span>
        <div id="input_img_father_div">
          <input id="upload_input" type="file" accept="image/*" />
          <!-- 自定义按钮效果 -->
          <div id="input_img_btn_div">
            <span id="input_img_btn_span">+
              <p>(1/5)</p>
            </span>

          </div>

        </div>
        <p>1、支持JPG、PNG、GIF格式的图片，大小请小于2M</p>
        <p> 2、相关商品需提供有CNAS、CMA或CMAF认证的质量检测报告。</p>
      </div>
    </div>
    <div class="content_1">
      <div class="btn">
        <a href="../shangpinguanli/shangpinliebiao.html"> <button type="button" class="mbutton-blue" data-toggle="modal"
            data-target="#del">发布商品</button>
          <button class="mbutton-blueb">
            保存草稿</button></a>
      </div>

    </div>
  </div>

  <script>

    $("#upload_input").change(function () {
      var objUrl = getObjectURL(this.files[0]);//获取文件信息
      console.log(objUrl)
      if (objUrl) {
        $('span#input_img_btn_span').hide();
        $('img#upload').show();
        $("img#upload").attr("src", objUrl);
      }
    });
    function getObjectURL(file) {
      var url = null;
      if (window.createObjectURL != undefined) {
        url = window.createObjectURL(file);
      } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
      }
    }
    $('.icon-anniu_kaiqi').click(function () {
      $(this).css({
        display: 'none',
      })
      $(this).siblings().css({
        display: 'block',
      })
    })
    $('.icon-anniu_guanbi').click(function () {
      $(this).css({
        display: 'none',
      })
      $(this).siblings().css({
        display: 'block',
      })
    })

  </script>
</body>

</html>